<template>
  <v-layout row wrap>
    <v-flex xs9  v-if="hasData">
      <v-card hover raised v-for='(art, index) in articles' :key='art.id' style="margin-bottom:24px">
        <v-card-row class="green darken-1"  @click='jump(art.url)'>
          <v-card-title >
            <span class="white--text">{{art.title}}</span>
            <v-spacer></v-spacer>
          </v-card-title>
          <p style="color:#e1e1e1;font-size:12px;margin-bottom: -35px;" class="text-xs-right">{{art.create_date}}</p>
        </v-card-row>
        <v-card-text v-html='art.summary' @click='jump(art.url)'>
        </v-card-text>
        <v-divider></v-divider>
        <v-card-row>
          <v-btn :to="'/articles/'+keyword.url" router small flat v-for="keyword in art.keywords" :key="keyword.id" class="green--text" >{{keyword.value}}</v-btn>
        </v-card-row>
      </v-card>
      
  
      <v-container v-if="hasData">
        <v-pagination style="margin:auto" v-bind:length.number="pageCount" v-model="page"></v-pagination>
      </v-container>
    </v-flex>
    <v-flex xs9 v-else>
      <v-card>
        <v-card-text>
          没有数据
        </v-card-text>
      </v-card>
    </v-flex>
    <v-flex xs3>
      <right-bar></right-bar>
    </v-flex>
  </v-layout>
</template>

<script>
import RightBar from '@/components/RightBar'
var pageInfo = {
  page: 1,

}
export default {
  name: 'articles',
  components: {
    RightBar: RightBar
  },
  data() {
    return {
      hasData:false,
      id: this.$route.params["id"] == null ? "0" : this.$route.params["id"],
      total: 0,
      page: 1,
      pageCount: 0,
      loadmore: false,
      articles: []
    }
  },
  watch: {
    $route: function () {
      this.id = this.$route.params["id"] == null ? "0" : this.$route.params["id"]
      logger.log("route change:",this.id)
      this.articles=[]
      this.loadData()
    },
    page: function () {
      this.loadData()
    }
  },
  mounted: function () {
    this.loadData()
  },
  methods: {
    isOdd(num) {
      return {
        'panel-default': true
      }
    },
    jump(url) {
      this.$router.push('/article/' + url)
    },
    jumpKey(url) {
      this.$router.push('/articles/' + url)
    },
    loadData() {
      var vm = this
      fetch('/api/arts/' + this.id + '/' + (this.page - 1) + '/15', {
        method: 'GET',
        mode: 'cors'
      }).then(function (response) {
        logger.log(response);
        if (response.status >= 200 && response.status < 400) {
          return response.json()
        } else {
          var error = new Error(response.statusText)
          error.response = response
          throw error
        }
      }).then(function (json) {
        logger.log(json);
        if (json && json.code == 0) {
          vm.total = parseInt(json.msg)
          vm.pageCount = Math.floor(vm.total / 15) + 1
          if (json.data && json.data.length > 0) {
            vm.hasData=true
            vm.articles = json.data
          }else{
            vm.hasData=false
          }
          if (json.data == null || json.data.length < 15) {
            vm.loadmore = false
          
          }
        }
      })
    }
  }
}
function getScrollTop() {
  var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
  if (document.body) {
    bodyScrollTop = document.body.scrollTop;
  }
  if (document.documentElement) {
    documentScrollTop = document.documentElement.scrollTop;
  }
  scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
  return scrollTop;
}

//文档的总高度

function getScrollHeight() {
  var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
  if (document.body) {
    bodyScrollHeight = document.body.scrollHeight;
  }
  if (document.documentElement) {
    documentScrollHeight = document.documentElement.scrollHeight;
  }
  scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
  return scrollHeight;
}

//浏览器视口的高度

function getWindowHeight() {
  var windowHeight = 0;
  if (document.compatMode == "CSS1Compat") {
    windowHeight = document.documentElement.clientHeight;
  } else {
    windowHeight = document.body.clientHeight;
  }
  return windowHeight;
}


</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}

.pagein {
  display: block;
  text-align: center;
  width: 50%;
  margin: auto;
}

.link {
  cursor: pointer;
  font-size: 20px;
}

.summary {
  font-size: 13px;
  line-height: 1.7;
  color: #adacac;
}

.right-text {
  float: right;
  display: block;
  color: #878787;
  font-size: 14px;
  margin-top: 5px;
}
</style>
